<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/16
  Time: 18:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员管理页面</title>
    <style>
    </style>
</head>
<body>
<h1 style="font-size: 80px;color: red;text-align: center">会员管理页面<h1>
    <center>
        <table id="employeeTable" border="1px">
            <tr>
                <th>卡号</th>
                <th>姓名</th>
                <th>身份证号码</th>
                <th>性别</th>
                <th>年龄</th>
                <th>手机号</th>
                <th>余额</th>
                <th>操作</th>
            </tr>

            <tr>
                <td>110</td>
                <td>小明</td>
                <td>123123</td>
                <td>男</td>
                <td>18</td>
                <td>32113</td>
                <td>1000</td>
                <td><a href="delete?id=001">删除</a></td>
            </tr>
            <tr>
                <td>120</td>
                <td>小红</td>
                <td>123123</td>
                <td>女</td>
                <td>15</td>
                <td>123321</td>
                <td>1000</td>
                <td><a href="delete?id=002">删除</a></td>
            </tr>
            <tr>
                <td>130</td>
                <td>李华</td>
                <td>123123</td>
                <td>男</td>
                <td>15</td>
                <td>123123</td>
                <td>10034</td>
                <td><a href="delete?id=003">删除</a></td>
            </tr>
        </table>
    </center>

    <center>
        <form>
        <div id="formBox">
            <h4 style="font-size: 25px;color: aqua">添加会员</h4>
            <table id="addEmp">
                <tr>
                    <td class="word">卡号：</td>
                    <td class="inp">
                        <input type="text" name="empName" id="card">
                    </td>
                </tr>

                <tr>
                    <td class="word">名字：</td>
                    <td class="inp">
                        <input type="text" name="empName" id="empName">
                    </td>
                </tr>

                <tr>
                    <td class="word">身份证号：</td>
                    <td class="inp">
                        <input type="text" name="email" id="id">
                    </td>
                </tr>

                <tr>
                    <td class="word">性别：</td>
                    <td class="inp">
                        <input type="text" name="sex" id="sex">
                    </td>
                </tr>

                <tr>
                    <td class="word">年龄：</td>
                    <td class="inp">
                        <input type="text" name="old" id="old">
                    </td>
                </tr>

                <tr>
                    <td class="word">手机号：</td>
                    <td class="inp">
                        <input type="text" name="tel" id="tel">
                    </td>
                </tr>

                <tr>
                    <td class="word">余额：</td>
                    <td class="inp">
                        <input type="text" name="yuan" id="yuan">
                    </td>
                </tr>

                <tr>
                    <td colspan="2" align="center">
                        <button id="addButton" value="abc">提交</button>  <input type="reset" name="Submit" value="重置" />
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </center>

    <script>
        function del(){
//获取所有超链接
            var allA = document.getElementsByTagName("a");
            //为每个超链接绑定单击响应函数
            for(var i=0;i<allA.length;i++){
                allA[i].onclick = function(){
                    //获取当前tr
                    var tr = this.parentNode.parentNode;
                    //获取删除对象
                    var name = tr.getElementsByTagName("td")[0].innerHTML;
                    if(confirm("你确定要删除"+name+"吗?")){
                        tr.parentNode.removeChild(tr);
                    }
                    /* 单机超链接以后，超链接会跳转页面，这是超链接的默认行为，可以在响应函数的最后通过return false来取消默认 */
                    return false;
                }
            }
        }
        var addButton = document.getElementById("addButton");
        addButton.onclick = function(){
            var card = document.getElementById("card").value;
            var name = document.getElementById("empName").value;//获取文本框中的内容
            var id = document.getElementById("id").value;
            var sex = document.getElementById("sex").value;
            var old = document.getElementById("old").value;
            var tel = document.getElementById("tel").value;
            var yuan = document.getElementById("yuan").value;





            var tr = document.createElement("tr");
            tr.innerHTML ="<td>"+card+"</td>"+
                "<td>"+name+"</td>"+
                "<td>"+id+"</td>"+
                "<td>"+sex+"</td>"+
                "<td>"+old+"</td>"+
                "<td>"+tel+"</td>"+
                "<td>"+yuan+"</td>"+

                "<td><a href='javascript:;'>删除</a></td>";
            var table = document.getElementById("employeeTable");
            var tbody = table.getElementsByTagName("tbody")[0];//浏览器会默认添加tbody
            tbody.appendChild(tr);
            del();//要再次调用函数,因为如果不调用的话,之前页面加载完,超链接绑定上了函数,然后再添加员工信息时,此时新添加的a就没有绑定上,需要在绑定一次
        }
    </script>

</body>
</html>